<template>
  <div class="app">
    <el-card class="box-card">
      <h1 class="title">系统登录</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密  码" prop="password">
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>

        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即登录</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form>
      <div class="autoLogin">
        <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
        <el-checkbox v-model="autoLoginChecked">自动登录</el-checkbox>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { checkLogin } from "@/api/index.js";
import { getCookie, setCookie, clearCookie } from "@/uitils/cookie";
import {encode, decode} from '@/uitils/secretKey'
export default {
  name: "",
  data() {
    var validateName = (rule, value, callback) => {
    /*   if (value.includes("admin")) {
        callback();
      } else {
        callback("用户名必须包含admin");
      } */
      callback()
    };

    var validatePwd = (rule, value, callback) => {
      // console.log(value);
      //   console.log(value.charAt(2));
     /*  if (value.charAt(2) == "3") {
        callback();
      } else {
        callback("密码第三位必须是3");
      } */
      callback()
    };

    return {
      autoLoginChecked: false,
      rememberPwd: false,
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur"
          },
          { validator: validateName, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur"
          },
          {
            pattern: /^1[1-9]\d{3,9}$/,
            message: "请输入正确的密码",
            trigger: "blur"
          },
          { validator: validatePwd, trigger: "blur" }
        ]
      }
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  created() {
    let account = getCookie("account");
    // let password = Base64.decode(getCookie("password"));
    let password = decode(getCookie("password"));
    // 如果存在赋值给表单，并且将记住密码勾选
    if (account) {
      this.ruleForm.username = account;
      this.ruleForm.password = password;
      this.rememberPwd = true;
    }

    // let oldUser = window.localStorage.getItem("userRemember");
    // if (oldUser) {
    //   if (getCookie("user_" + oldUser)) {
    //     this.ruleForm.username = oldUser;
    //     this.ruleForm.password = getCookie("user_" + oldUser);
    //     this.rememberPwd = true;
    //   }
    // }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    /*  submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message({
            message: "成功!!!!!!芜湖",
            type: "success"
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    } */

    submitForm(formName) {
      this.$refs[formName]
        .validate()
        .then(async () => {
          let res = await checkLogin(this.ruleForm);
          console.log(res);
          if(res.meta.status == 400) throw new Error(res.meta.msg)
          let {
            data: { token, username }
          } = res
          

          this.$store.commit("setToken", token);
          this.$store.commit("setUsername", username);

          if (this.rememberPwd) {
            setCookie(
              "account",
              this.ruleForm.username,
              60 * 60 * 24 * 30
            );
            // base64加密密码
            // let passWord = Base64.encode(this.ruleForm.password);
            let passWord = encode(this.ruleForm.password);
            setCookie("password", passWord, 60 * 60 * 24 * 30);
          } else {
            setCookie("account", "");
            setCookie("password", "");
          }

          //设置自动登录 cookie
          if (this.autoLoginChecked) {
            setCookie("eks_cache_keys", true, 60 * 60 * 24 * 30);
          } else {
            setCookie("eks_cache_keys", true);
          }

          this.$message.success("成功!!!!!!芜湖");
          this.$router.push("/");
        })
        .catch(err => {
          // alert(err)
          this.$message.error(err);
        });
    }
  },
  filters: {}
};
</script>

<style scoped>
.app {
  height: 100%;
  background-image: url("../../assets/bg.jpg");
  background-size: 100% 100%;
}

.box-card {
  width: 500px;
  height: 300px;
  text-align: center;
  margin: 0px auto;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  opacity: 0.9;
}

h1 {
  margin: 10px 0;
  font-size: 20px;
}

.title {
  color: black;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.demo-ruleForm {
  margin-right: 10px;
}

.autoLogin {
  text-align: center;
  margin: 10px auto;
}
</style>
